import {Background, Controls, NodeToolbar, ReactFlow, useViewport} from "@xyflow/react";

const CustomNode = ({ id, data, xPos, yPos }) => {
    const { zoom } = useViewport();

    const toolbarStyle = {
        transform: `scale(${1 / zoom})`,
    };

    return (
        <div style={{ position: 'relative', left: xPos, top: yPos }}>
            <NodeToolbar style={toolbarStyle}>
                <div>Toolbar for {id}</div>
            </NodeToolbar>
            <div style={{ padding: 10, background: '#ddd' }}>{data.label}</div>
        </div>
    );
};

const initialNodes = [
    { id: '1', position: { x: 250, y: 5 }, data: { label: '节点 1' }, type: 'custom' },
    { id: '2', position: { x: 100, y: 100 }, data: { label: '节点 2' }, type: 'custom' },
];

const initialEdges = [];

const nodeTypes = {
    custom: CustomNode,
};

const Flow = () => (
    <div style={{ height: '100vh' }}>
        <ReactFlow nodes={initialNodes} edges={initialEdges} nodeTypes={nodeTypes} fitView>
            <Background />
            <Controls />
        </ReactFlow>
    </div>
);

export default Flow;
